<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>BC显示</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <style>
        .area {
            margin: 20px auto 0px auto;
        }

        .mui-input-group:first-child {
            margin-top: 20px;
        }

        .mui-input-group label {
            width: 22%;
        }

        .mui-input-row label ~ input,
        .mui-input-row label ~ select,
        .mui-input-row label ~ textarea {
            width: 78%;
        }

        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }

        .mui-content-padded {
            margin-top: 25px;
        }

        .mui-btn {
            padding: 10px;
        }

    </style>
    <script src="js/angular.min.js"></script>
</head>

<body ng-app="regPage" ng-controller="regCtrl">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="login.html"></a>
    <h1 class="mui-title">注册</h1>
</header>
<div class="mui-content">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label>手机</label>
            <input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号" ng-model="phone">
        </div>
        <div class="mui-input-row">
            <label>验证</label>
            <input id='verifyCode' style="width: 45%;float: none" type="text" class="mui-input-clear mui-input" placeholder="请输入验证码"
                   ng-model="verifyCode">
            <button style="float: none;width: 30%" class="mui-btn mui-btn-primary" ng-click="getVerifyCode()" ng-disabled="canClick" ng-bind="description"></button>
        </div>
        <div class="mui-input-row">
            <label>密码</label>
            <input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码"
                   ng-model="password">
        </div>
        <div class="mui-input-row">
            <label>确认</label>
            <input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码"
                   ng-model="passwordConfirm">
        </div>
    </form>
    <div class="mui-content-padded">
        <button id='reg' class="mui-btn mui-btn-block mui-btn-primary" ng-click="register()">注册</button>

    </div>
</div>
<script src="js/mui.min.js"></script>
<script src="globalVar.js"></script>
<script>
    var app = angular.module('regPage', []);
    app.controller('regCtrl', function ($scope, $http, $interval) {
        $scope.description = "获取验证码";

        $scope.verifyCode = "";
        $scope.password = "";
        $scope.passwordConfirm = "";

        $scope.getVerifyCode = function () {

            if (!(/^1[34578]\d{9}$/.test($scope.phone))) {
                alert("手机号码有误，请重填");
                return false;
            }

            var data = {
                "phone": $scope.phone,
            };
            var second = 59;
            var timerHandler;
            $http({
                method: "POST",
                url: url + "/user/verifyCode",
                headers: {'Content-Type': 'application/json'},
                data: data
            }).then(function (response) {
                if (response.data.success === true) {
                    console.log(response.data);
                    if (response.data){
                        timerHandler = $interval(function () {
                            if (second <= 0) {
                                $interval.cancel(timerHandler);
                                second = 59;
                                $scope.description = "获取验证码";
                                $scope.canClick = false;
                            } else {
                                $scope.description = second + "s";
                                second--;
                                $scope.canClick = true;
                            }
                        }, 1000)
                    }
                } else {
                    alert(response.data.msg);
                }
            })
        }

        $scope.register = function () {
            if (!(/^1[34578]\d{9}$/.test($scope.phone))) {
                alert("手机号码有误，请重填");
                return false;
            }

            if ($scope.verifyCode === "" || $scope.password === "" || $scope.passwordConfirm === ""){
                alert("验证码或密码不能为空");
                return false;
            }

            if ($scope.password !== $scope.passwordConfirm) {
                alert("两次密码输入不一致");
                return false;
            }

            var data = {
                "phone": $scope.phone,
                "verifyCode": $scope.verifyCode,
                "password": $scope.password
            };

            $http({
                method : "POST",
                url : url+"/user/register",
                headers:{'Content-Type': 'application/json'},
                data : data
            }).then(function (response) {
                console.log(response.data);
                if (response.data.success === true) {
                    alert("注册成功");
                    location.href="login.html"
                }else {
                    alert(response.data.msg);
                }
            })

        }
    });
</script>
</body>

</html>